{% extends "frame/tabpages.html" %}
{% block content %}
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <table id="id_orderlist" class="layui-table layui-form" lay-filter="f_orderlist"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% include "frame/searchBindMode.html" %}
</body>
{% endblock %}

{% block jsscript %}
<script type="text/html" id="toolbarOper">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['jquery','table', 'laydate'], function(){
    var table = layui.table;
    var laydate = layui.laydate;
    var $ = layui.$;
    var cid = {{cid}}

    laydate.render({
        elem: '#id_orderdate' //指定元素
    });

    table.render({
        elem: '#id_orderlist', 
        method: 'post',
        url: "{% url 'order:show_orderListCase' cid %}", //数据接口
        height: 'full-180',
        cellMinWidth: 50,
        page: true, //开启分页
        limit: 10,
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips',
            }],
        cols: [[ //表头
            {type: 'numbers',   title: '序号',       width:'5%',  align:'center'},
            {field: 'orderid',  title: '订单编号',   width:'10%', align:'center', sort: true},
            {field: 'customer', title: '客户名称',   width:'15%', align:'center', sort: true},
            {field: 'customer', title: '详情',       width:'5%',  align:'center',
                templet: function(d){
                    var str = "<a style='cursor: pointer' onclick=\"xadmin.open('订单详情', '{% url 'order:show_orderDetail' '000' %}')\">查看</a>";
                    str = str.replace('000', d.id) ;
                    return str; 
                }
            },
            {field: 'deposit',  title: '压金',       width:'10%',  align:'center', sort: true},
            {field: 'price',    title: '价格/日',    width:'10%',  align:'center', sort: true},
            {field: 'orderdate',  title: '下单时间', width:'10%',  align:'center', sort: true},
            {field: 'effectdays', title: '已租',     width:'10%',  align:'center', sort: true, 
                templet: function(d){
                    return d.effectdays + ' 天';
                }
            },
            {field: 'balance',    title: '余额',     width:'10%',  align:'center', sort: true},
            {field: 'comment',    title: '备注',     width:'15%',   align:'center', sort: true}
        ]]
    });  

    table.on('tool(f_orderlist)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确定要删除?', function(index){
                $.ajax({
                    type:'post',
                    url:"{% url 'order:show_orderDel' 0 %}".replace('0', data.id),
                    data:{},
                    success:function(res){
                        if (res.code == 0)
                        {
                            layer.msg("删除成功!");
                            obj.del();
                            layer.close(index);
                        }

                    },
                    error:function(res)
                    {
                        layer.msg("删除失败!");
                    }
                });
            });
        } else if(obj.event === 'edit'){
            uri = obj.data.id + '/update'; 
            xadmin.open('编辑用户',uri,600,400);
        }

    });
});
</script>
{% endblock %}
